<template>
  <div class="app-shell">
    <aside class="app-sidebar">
      <div class="sidebar-logo">
        <RouterLink to="/">
          <span class="brand-title">{{ moduleDisplayName }}</span>
          <span class="brand-subtitle">Management Console</span>
        </RouterLink>
      </div>

      <div class="sidebar-summary">
        <p>{{ moduleSummary }}</p>
      </div>

      <section
        v-for="group in navGroups"
        :key="group.title"
        class="sidebar-group"
      >
        <p class="sidebar-group-title">{{ group.title }}</p>
        <nav class="sidebar-nav">
          <RouterLink
            v-for="item in group.items"
            :key="item.path"
            :to="item.path"
            :class="['sidebar-link', { 'is-active': isActive(item.path) }]"
          >
            <span class="sidebar-link-label">{{ item.label }}</span>
            <span class="sidebar-link-caption">{{ item.description }}</span>
          </RouterLink>
        </nav>
      </section>

      <div class="sidebar-footer">
        <div class="sidebar-quick-links">
          <RouterLink
            v-for="link in quickLinks"
            :key="link.path"
            :to="link.path"
            class="sidebar-quick-link"
          >
            {{ link.label }}
          </RouterLink>
        </div>
        <p>© {{ currentYear }} · {{ moduleDisplayName }}</p>
      </div>
    </aside>

    <div class="app-main">
      <header class="app-topbar">
        <div class="topbar-left">
          <div class="topbar-title">
            <span class="topbar-chip">业务模块</span>
            <h1>{{ moduleDisplayName }} 管理系统</h1>
          </div>
          <p class="topbar-subtitle">快速掌握 {{ moduleDisplayName }} 的运行态势，处理关键流程。</p>
        </div>
        <div class="topbar-right">
          <label class="topbar-search">
            <span aria-hidden="true">🔍</span>
            <input type="search" :placeholder="'搜索' + moduleDisplayName + '或关键词'" />
          </label>
          <RouterLink :to="managementPath" class="pill-button">进入管理页</RouterLink>
          <RouterLink to="/login" class="pill-button ghost">切换账号</RouterLink>
          <button type="button" class="avatar-button" aria-label="个人中心">
            Admin
          </button>
        </div>
      </header>
      <main class="app-content">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router';

const route = useRoute();
const currentYear = new Date().getFullYear();
const moduleDisplayName = '${moduleDisplayName?js_string}';
const moduleSummary = '${moduleSummary?js_string}';
const managementPath = '${frontendRouteFullPath?js_string}';

const navGroups = [
  {
    title: '工作台',
    items: [
      { label: '总览驾驶舱', description: '业务总览、指标看板', path: '/' },
      { label: moduleDisplayName + ' 管理', description: '数据维护与流程处理', path: managementPath },
    ],
  },
  {
    title: '系统配置',
    items: [
      { label: '账号中心', description: '登录、权限、角色', path: '/login' },
      { label: '系统特性', description: '查看启用的模块', path: '/system/features' },
    ],
  },
];

const quickLinks = [
  { label: '操作日志', path: '/system/logs' },
  { label: '帮助文档', path: '/docs' },
];

const isActive = (path: string) => {
  if (path === '/') {
    return route.path === '/';
  }
  return route.path.startsWith(path);
};
</script>

